<template>
	<view class="pages">
		<view class="shop_content">
			<!--幻灯片-->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular indicator-dots autoplay interval='5000' indicator-active-color="#ffc82e"
					:style="'height:'+get_h+'px'">
					<swiper-item v-for="(d,i) in images" :key="i">
						<image 
						:class="'swiperimg '+(d.show ?'danchu':'')" 
						:style="'height:'+get_h+'px;width:'+get_h+'px'" 
						:src="get_img(d.url)" 
						mode="aspectFit"
						@load="dealLoad(i)"
						></image>
					</swiper-item>
				</swiper>
			</view>

			<!--price-->

			<view class="price_w flex">
				<view>
					<view class="price_w_l flex">
						<text class="price_w_l_l">积分</text>
						<text class="price_w_l_r">{{shop_detai.point}}</text>
					</view>
				</view>
				<text class="price_w_r">月销量：{{shop_detai.sales}}</text>
			</view>

			<!--私人定制订单-->
			<view class="dingzhi flex btn" v-if="shop_detai.id == 237" @click="opendingzhi">
				<view class="l_w flex">
					<uni-icons type="vip-filled" color="#eebf6d" size="25"></uni-icons>
					<text class="dingzhi_t">我的定制报告</text>
				</view>
				<uni-icons type="forward" size="25"></uni-icons>
			</view>

			<!--title-->
			<view class="shop_title">
				<text class="shop_title_t">{{shop_detai.title}}</text>
			</view>

			<!--商品规格详情-->
			<view class="shop_detail_w" v-if="other.infos && other.infos.length>0">	
			<view class="shop_detail_list flex" :style="showmore?'height:auto':'height:203px'">
			<view class="shop_detail_dan" v-for="d of other.infos">
			<text class="shop_detail_dan_name">{{d.attributeName}}</text>
			<text class="shop_detail_dan_info">{{d.value}}</text>
			</view>
			</view>
			
			<view class="more" @click="showmore = !showmore">
			<text>{{showmore?'收起详情':'展开详情'}}</text>	
			</view>
			
			</view>

			<!--desc-->
			<view class="nodes_w">
			<rich-text class="nodes" :nodes="imgDeal(shop_detai.desc)"></rich-text>
			</view>

			<!--占位-->
			<view style="height: 50px;"></view>

			<view class="xfbtn btn">
				<view @click="openshop" class="dan_xf" style="width: 250rpx;background:linear-gradient(to right, #d99ecc, #6487d6)">
					<text class="xfbtn_t">现金购买</text>
				</view>
				
				<view class="dan_xf" style="width: 500rpx;"  @click="goods_c">
					<text class="xfbtn_t">立即兑换</text>
				</view>
				
				
			</view>

		</view>
		
		<!--规格弹出层-->
		<uni-transition :mode-class="modeClass" :show="showspace && shop_id>0" :styles="style">
		<space 
		:shop_id="shop_id" 
		:buy_type="4" 
		:shopimg="images.length >0?images[0].url:''"
		v-on:close="showspace = false"
		v-on:addcart="addcart"
		>
		</space>
		</uni-transition>
		
		<shoucang :shopid="shop_id" type="1"></shoucang>
		
	</view>
</template>

<script>
	import $util from "@/util/util.js"
	import space from '@/pages/shop/shopdetail/space.vue'
	//import goodsnav from '@/pages/shop/shopdetail/goodsnav.vue'
	import shoucang from "@/pages/shop/components/shoucang/shoucang"
	import {
		get_img,
		openwin
	} from "@/util/tool.js"
	export default {
		data() {
			return {
				modeClass:['fade', 'slide-bottom'],
				style:{},
				get_h:uni.getSystemInfoSync().windowWidth,
				shop_detai: [],
				shop_id:0,
				buy_type:1,//1购物车2立即购买
				showspace:false,
				images: [],
				loading:true,//等待加载详细页
				showmore:false,//展开收起详情
				//infos:[],//商品的详细规格
				other:[],//其他的参数
			}
		},
		components: {
		space,
		//goodsnav,
		//descinfo
		shoucang
		},
		onShow() {
			//alert(2)	
		},
		onBackPress(e) {
			if(e.from == "backbutton"){
			if(this.showspace){
			this.showspace = false;
			return true 
			}
			uni.navigateBack();
			return true 
			}
		},
		onLoad(e) {
			this.style={ 
			position: 'fixed',
			bottom: '0',
			left: '0',
			height:String(uni.getSystemInfoSync().windowHeight-50)+'px'
			};
			this.shop_id = e.id;
			this.get_data(e.id);
		},
		methods: {
			dealLoad(i){
				this.images[i].show = true
			},
			addcart(){
			if(this.other.cartnum){
			this.other.cartnum = this.other.cartnum +1;
			}else{
			this.other.cartnum = 1;
			}
			this.showspace = false;	
			},
			imgDeal(html){
			html = String(html)
			html = html.replace(/\style/gi, '');
			let newContent= html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"');
			return newContent;
			},
			goods_c(){
			$util.login();
			this.showspace = true;
			},
			get_data(id) {
				let that = this;
				$util.showProgress();
				$util.ajax({
					url: 'Shop/ajax_detail',
					id: id
				}, (res, err) => {
					$util.hideProgress();
					//console.log(res) 
					//console.log(JSON.stringify(res))
					that.shop_detai = res.data
					if(res.data.images && res.data.images.length>0){
						for (var i = 0; i < res.data.images.length; i++) {
							that.images.push({url:res.data.images[i],show:false});
						}
					}
					that.get_other_data(id);
				})
			},
			get_other_data(id) {
				let that = this;
				$util.showProgress();
				$util.ajax({
					url: 'Shop/ajax_detail_other',
					id: id
				}, (res, err) => {
					$util.hideProgress();
					//console.log(res) 
					//console.log(JSON.stringify(res))
					that.other = res.data
				})
			},
			get_img(path,size = 0) {
				return get_img(path,size)
			},
			onClick(e) {
				console.log(JSON.stringify(e))
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			opendingzhi(){
				$util.openwin('/pages/cdfw/dingzhi/list')
			},
			openshop(){
				$util.openwin('/pages/shop/shopdetail/shopdetail?id='+this.shop_id)
			}
			
		}
	}
</script>

<style scoped>
	
	.swiperimg{
		opacity: 0;
	}
	.danchu{
		opacity: 1;
		transition: .6s;
	}
	/*标题*/
	.shop_title {
		padding: 10px;
		background-color: #ffffff;
		margin-top: 5px;
	}

	.shop_title_t {
		font-size: 20px;
		line-height: 30px;
		letter-spacing: 3px;
	}

	/*价格*/
	.price_w {
		flex-direction: row;
		justify-content: space-between;
		padding: 10px;
		align-items: center;
		background-color: #ffffff;
		margin-top: 5px;
	}

	.price_w_l {
		flex-direction: row;
		align-items: flex-end;
	}

	.price_w_l_l {
		font-size: 12px;
		color: #383838;
		margin-right: 5px;
	}

	.price_w_l_r {
		font-size: 25px;
		font-weight: bold;
		color: #e64340;
	}




	/*desc*/
	.desc {
		background-color: #ffffff;
		margin-top: 10px;
	}
	.nodes_w{
		padding: 20rpx;background: #ffffff;margin-top:20rpx;
	}
	/* #ifndef APP */
	.nodes img{
		max-width: 100% !important;
		height: auto;
	}
	/* #endif */
	.shop_detail_w{
    background: #ffffff;
    margin-top: 10px;
    padding: 20rpx 20rpx 0 20rpx;
	}		
	.shop_detail_list{
	    flex-direction: row;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    height: 230px;
	    overflow: hidden;
	}
	.shop_detail_dan{
	font-size: 14px;
	color: #383838;
	line-height: 22px;
	height: 22px;
	width: 335rpx;
	overflow: hidden;
	}
	.shop_detail_dan_name{
	margin-right: 10rpx;
	color: #000000;
	}
	.shop_detail_dan_info{
	color: #797979;	
	}
	.more{
	    width: 100%;
	    text-align: center;
	    height: 50px;
	    line-height: 50px;
	    font-size: 14px;
	    color: #efb336;
	}
	.dingzhi{
	    flex-direction: row;
	    align-items: center;
	    justify-content: space-between;
	    background: #ffffff;
	    padding: 15px 10px;
	    margin-top: 5px;	
	}
	.l_w{
	    flex-direction: row;
	    align-items: center;	
	}
	.dingzhi_t{
		font-size: 14px;
		color: #585858;
		margin-left: 5px;
	}
	.xfbtn{
		width: 750rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.dan_xf{
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
	}
	.xfbtn_t{
		font-size: 16px;
		color: #ffffff;
		
	}
	
</style>
